<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<!--引入layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.3"></script>

		<script type="text/javascript" src="/admin/html/module/shuiwu/kehu/common.js?v=1.02"></script>


		<!-- 引入图表 -->
		<script src="/admin/js-css/js/eCharts/echarts.js"></script>
		
		<link rel="stylesheet" href="/admin/js-css/css/main.css?v=1.1">
		<link rel="icon" href="/admin/js-css/img/logo.png">
		<title>title</title>
	</head>

	<body>
		<div id="app">
			<el-container>
				<div style="width: 100%;">
					<div class="marginBom10">
						<el-row :gutter="20" style="width: 100%;">
							<el-col :span="6">
								<div class="grid-content" @click="kaihu">
									<div>开户</div>
									<div class="icons discenter"><i class="el-icon-user"></i></div>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="grid-content" @click="dukachongzhi">
									<div>读卡充值</div>
									<div class="icons discenter"><i class="el-icon-bank-card"></i></div>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="grid-content" @click="jiaofeijilu">
									<div>缴费记录</div>
									<div class="icons discenter"><i class="el-icon-tickets"></i></div>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="grid-content">
									<div>预警统计</div>
									<div class="icons yjtj">
										<div class="yjtjitem">
											<el-tooltip class="item" effect="dark" content="3个月之内有缴费记录!" placement="bottom">
												<span @click="yujingtiaozhuan(1)" style="cursor: pointer;" ><i class="el-icon-circle-check"></i>正常：{{yujingdata["khyj-1"] || 0}}</span>
											</el-tooltip>
											<span><i class="el-icon-warning-outline"></i>低余额：0</span>
											<span><i class="el-icon-star-off"></i>欠费：0</span>
										</div>
										<div class="yjtjitem">
											<el-tooltip class="item" effect="dark" content="3至6个月之间没有缴费记录!" placement="bottom">
												<span @click="yujingtiaozhuan(2)" style="color: #def140;cursor: pointer;"><i class="el-icon-s-opportunity"></i>异常：{{yujingdata["khyj-2"] || 0}}</span>
											</el-tooltip>

											<el-tooltip class="item" effect="dark" content="6个月至一年之内有缴费记录!" placement="bottom">
												<span @click="yujingtiaozhuan(3)" style="color: #ab2e2e;cursor: pointer;"><i class="el-icon-help"></i>预警：{{yujingdata["khyj-3"] || 0}}</span>
											</el-tooltip>

											<el-tooltip class="item" effect="dark" content="超过1年没有缴费记录或没有缴费记录!" placement="bottom">
												<span @click="yujingtiaozhuan(4)" style="color: red;cursor: pointer;"><i class="el-icon-s-order"></i>报警：{{yujingdata["khyj-4"] || 0}}</span>
											</el-tooltip>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
					<div class="marginBom10 gs">
						<el-tabs v-model="activeName" @tab-click="handleClick">
							<el-tab-pane label="购水量" name="0">
								<div class="disleft">
									<div style="width: 75%;min-height: 300px;height: 400px;" id="gsl"></div>
									<div
										style="width: 25%;min-height: 300px;display: flex;flex-direction: column;justify-content: center;padding: 50px 0;">
										<div style="margin-bottom: 30px;">自助缴费机区域位置</div>
										<div class="listli">
											<div>
												<span>1</span>1号机：政府大楼对面大厅
											</div>
											<div>
												<span>2</span>2号机：xxxxxxxxxxxxxxxxxx
											</div>
											<div>
												<span>3</span>3号机：xxxxxxxxxxxxxxxxxx
											</div>
											<div>
												<span>4</span>4号机：xxxxxxxxxxxxxxxxxx
											</div>
										</div>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="购水金额" name="1">
								<div class="disleft">
									<div style="width: 75%;min-height: 300px;height: 400px;" id="gsl2"></div>
									<div style="width: 25%;min-height: 300px;display: flex;flex-direction: column;justify-content: center;padding: 50px 0;">
										<div style="margin-bottom: 30px;">自助缴费机区域位置</div>
										<div class="listli">
											<div>
												<span>1</span>1号机：政府大楼对面大厅
											</div>
											<div>
												<span>2</span>2号机：xxxxxxxxxxxxxxxxxx
											</div>
											<div>
												<span>3</span>3号机：xxxxxxxxxxxxxxxxxx
											</div>
											<div>
												<span>4</span>4号机：xxxxxxxxxxxxxxxxxx
											</div>
										</div>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
					<div>
						<el-row :gutter="20">
							<el-col :span="12">
								<div style="background-color: #fff;padding: 10px;">
									<div style="height: 40px; line-height: 40px; border-bottom: 1px solid #E4E7ED;">
										水表分布情况</div>
									<div style="width: 100%;min-height: 300px;" id="sbfbqk">1</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div style="background-color: #fff;padding: 10px;">
									<div style="height: 40px; line-height: 40px; border-bottom: 1px solid #E4E7ED;">
										最近一周访问统计</div>
									<div class="disleftaround">
										<div class="zjfwtjitem">
											<div>今日IP</div>
											<div>1<i class="el-icon-location-outline"
													style="color: #5470C6;margin-left: 2px;"></i></div>
										</div>
										<div class="zjfwtjitem">
											<div>今日访问</div>
											<div>2<i class="el-icon-coordinate"
													style="color: #5470C6;margin-left: 2px;"></i></div>
										</div>
										<div class="zjfwtjitem">
											<div>总访问量</div>
											<div>3492<i class="el-icon-top-right"
													style="color: #5470C6;margin-left: 2px;"></i></div>
										</div>
									</div>
									<div style="width: 100%;min-height: 220px;" id="zjfwtj">1</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>

			</el-container>
		</div>

		<style>
			html {
				background-color: #f8f8f8;
				padding: 10px;
			}

			.el-row {
				margin-bottom: 20px;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.el-col {
				border-radius: 0px;
			}

			.grid-content {
				width: 100%;
				padding: 8px;
				min-height: 80px;
				background: #3CA2FF;
				color: #fff;
			}

			.disleft {
				display: flex;
			}

			.disleftaround {
				display: flex;
				justify-content: space-around;
			}

			.discenter {
				display: flex;
				justify-content: center;
			}

			.marginBom10 {
				margin-bottom: 10px;
			}

			.icons {
				font-size: 50px;
				border-bottom: 1px solid #eee;
			}

			.yjtj {
				font-size: 12px;
				height: 50.6px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}

			.yjtjitem span {
				margin-right: 20px;
			}

			.gs {
				background-color: #fff;
				padding: 10px;
			}

			.listli,
			.listli div {
				margin-bottom: 10px;
				font-size: 14px;
				color: #5f5f5f;
			}

			.listli span {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: #000;
				color: #fff;
				margin-right: 15px;
			}

			.zjfwtjitem {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 80px;
			}
		</style>
	</body>

	<script>
		$(window).resize(function(e) {
			location.reload([true])
		});


		var vm = new Vue({
			el: '#app',
			data: function() {
				return {
					activeName: '0',
					activeNamesbfb: '0',
					yujingdata:{},
				}
			},
			created(){
				this.yujingtongji();
			},
			methods: {
				handleClick(tab, event) {
					// console.log(tab.index);
				},
				handleClicksbfb(tab, event) {
					// console.log(tab, event);
				},
				//预警统计
				async yujingtongji(){
					const res = await postWebCustom(getTableId("934"),{});
					this.yujingdata = res.data;
				},
				//预警统计跳转
				yujingtiaozhuan(t){
					window.location.href = "/admin/html/module/shuiwu/jiaofei_list/list_kehuyujing.html?khyj="+t+"&tableId="+getTableId("932");
				},
				//缴费记录
				jiaofeijilu(){
					window.location.href = "/admin/html/module/shuiwu/jiaofei_list/list.html?tableId="+getTableId("903");
				},
				//读卡充值
				dukachongzhi(){
					fun.dukachongzhi();
				},
				//开户
				async kaihu() {
					let ids = "";
					let btn = {
						btn: ['确定','关闭']
						, yes: async function (index, layero) {
							//按钮【按钮一】的回调
							let win = getTopIframe(layero);
							let issubmit = win.verification();
							if (!issubmit) {
								return false;
							}
							let data = win.getData();
							let i = top.load();
							//调用开户接口
							let kplx = Object.values(data)[1]["kplx"];
							const khlocal = await postWebCustom(getTableId("906"),{kid:kplx,fromdata:JSON.stringify(data)});
							if(khlocal.code == 0){
								top.layer.close(i);
								top.alert(khlocal.msg);
								return ;
							}

							//开始调用本地读写卡服务
							const reskh = await postBodyNotHeaders(khlocal.data.dyjk,JSON.parse(khlocal.data.parms));
							const parsres2 = await postWebCustom(getTableId("908"),{mapset:JSON.stringify(khlocal.data),res:JSON.stringify(reskh)});
							if(parsres2.code == 0){
								top.layer.close(i);
								top.alert(parsres2.msg);
								return ;
							}

							//开始保存数据库
							let map1 = Object.values(data)[1];
							map1["sys_code"] = khlocal.data.sysCode;
							map1["user_code"] = khlocal.data.userCode;
							// map1["sys_code"] = "1";
							// map1["user_code"] = "923";
							let key1 = Object.keys(data)[1];
							data[key1] = map1;
							const addres = await addMapdata(getTableId("891"),data);
							top.layer.close(i);
							if(addres.code == 0){
								top.alert("写卡成功,"+addres.msg);
							}else {
								top.alert(addres.msg);
								top.layer.close(index);
							}



						}
						,btn1:function (index,layero){
							console.log("关闭按钮");
						}
					};

					const resq = await postBody("/admin/api/DataManagementController/queryDataForId",{tableId: getTableId("919"),other: {},ids:""+ids});
					if(resq.code == 0){
						top.alert(resq.msg);
						return;
					}
					top.f_layer_open_get("/admin/html/module/shuiwu/kehu/input_select_quyu.html?tableId="+getTableId("891"), "70%", "70%", function () {

					}, btn, "开户", resq.data);
				}
			}
		})
	</script>
	
	<script>
		initTongji();
		// 购水统计
		async function initTongji(){
			const res = await postWebCustom(getTableId("923"),{});

			// 购水量
			var chartDom = document.getElementById('gsl');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				title: {
					subtext: '单位:(立方)'
				},
				xAxis: {
					type: 'category',
					data: res.data.valuesm
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: res.data.valuesgsl,
					type: 'bar',
					itemStyle: {
						color: '#3CA2FF'
					}
				}]
			};
			option && myChart.setOption(option);

			var containers = ($(".disleft").width() * 0.75);
			$('#gsl2').css({"display":"block","width":containers});//获取tab栏的宽度并赋值给echarts

			// 购水金额
			var chartDom2 = document.getElementById('gsl2');
			var myChart2 = echarts.init(chartDom2);
			var option2;
			option2 = {
				title: {
					subtext: '单位:(立方)'
				},
				xAxis: {
					type: 'category',
					data: res.data.valuesm
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: res.data.valuesfee,
					type: 'bar',
					itemStyle: {
						color: '#3CA2FF'
					}
				}]
			};
			option2 && myChart2.setOption(option2);

			// 水表分布情况
			var chartDom = document.getElementById('sbfbqk');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				tooltip: {
					trigger: 'item'
				},
				series: [{
					name: '水表分布情况',
					type: 'pie',
					radius: '50%',
					data: [{
						value: 4,
						name: '诺特射频卡；4%'
					},
						{
							value: 21,
							name: '旌旗射频卡：21%'
						},
						{
							value: 63,
							name: '射频卡：63%'
						},
						{
							value: 12,
							name: '奇正射频卡：12%'
						}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					},
					itemStyle: {
						normal: {
							color: function(colors) {
								var colorList = [
									'#3AA1FF',
									'#36CBCB',
									'#4ECB73',
									'#FBD437',
								];
								return colorList[colors.dataIndex];
							}
						},
					}
				}]
			};
			option && myChart.setOption(option);


			// 最近一周访问统计
			var chartDom = document.getElementById('zjfwtj');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				grid: {
					left: '3%',
					top: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					name: 'Email',
					type: 'line',
					stack: 'Total',
					data: [120, 132, 101, 134, 90, 230, 210],
					itemStyle: {
						color: '#1890FF'
					}
				},
					{
						name: 'Union Ads',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310],
						itemStyle: {
							color: '#2FC25B'
						}
					},
				]
			};
			option && myChart.setOption(option);
		}

	</script>

</html>
